<script setup lang="ts">
import { toRefs } from 'vue'
import useFriendStore from '@store/modules/friend'

const { userInfo } = toRefs(useFriendStore())
console.log(userInfo, 'userInfo')

const toShop = () => {
  if (userInfo.value.ComHtml) {
    window.open(userInfo.value.ComHtml, '_blank')
  }
}
</script>
<template>
  <div class="min-w-[320px] w-80 h-full bg-[#F7F9FE] ">
    <van-nav-bar placeholder left-arrow :clickable="false" :border="false" style="background: #f9fafc;height: 4rem">
      <template #left></template>
      <template #title>
        <div class="flex h-full flex-col justify-evenly">
          <div class="flex items-center justify-center">
            <span class="flex-1 truncate">店铺信息</span>
          </div>
        </div>
      </template>
    </van-nav-bar>
    <div class="px-5">
      <img :src="userInfo.VIPlog" alt="" v-show="userInfo.VIPlog" class="m-4 mx-auto h-20 w-20" />
      <span class="text-base font-[500]">{{ userInfo.ComName }}</span>
      <div
        class="mx-auto mt-2 flex h-6 w-[4.375rem] bg-[url(@assets/images/friends/vip_bg.png)] bg-[length:100%_100%] bg-no-repeat">
        <span class="pl-[2.25rem] text-sm font-[700] leading-6 text-[#7e4f12]">
          {{ userInfo.UserVipYear }} 年
        </span>
      </div>
      <div class="my-4 text-ellipsis text-sm leading-6 text-[#4E5969]">
        {{ userInfo.ComInfo }}
      </div>
      <div
        class="h-[2.375rem] w-full cursor-pointer rounded bg-[#EBEEF5] text-center text-sm leading-[2.375rem] text-[#1B1F26]"
        @click="toShop">
        进入店铺
      </div>
      <div v-show="userInfo.ComEwmPic"
        class="mt-[1.5rem] flex h-[15.4375rem] w-full bg-[url(@assets/images/friends/erm_bg.png)] bg-[length:100%_100%] bg-no-repeat">
        <img :src="userInfo.ComEwmPic" alt="" class="mx-auto h-[7.5rem] w-[7.5rem]" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.van-nav-bar__content) {
  height: 100%;
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
